<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		header>img{
			/*vertical-align: center;*/
			float: left;
		}
		header>input{
			width: 400px;
			height: 42px;
			border:1px solid #999;
			padding: 0;
			padding-left: 20px;
			border-radius: 15px 0 0 15px;
			margin-top: 30px;
			float: left;
			border-right: none; 
		}
		.bo{
			width: 108px;
			height: 44px;
			padding: 0;
			border:none;
			float: left;
			background-color: #ff9c18;
			/*顺序是,上,右,下,左*/
			border-radius: 0 15px 15px 0;
			font:600 16px/42px 微软雅黑;
			margin-top: 30px;
			color: white;
			text-align: center;
		}
		header{
			overflow: hidden;
			/*margin-left: 50px;*/
		}
		ul{
			list-style: none;
			
		}
		a{
			text-decoration: none;
			float: left;
			/*panding一定要加到a标签上,这样点击跳转得范围比较大*/
			padding: 15px;
			/*background-color: #9fbc2c;*/
			color: white;
		}
		.wrapper{
			height: 50px;
			background-color: #7e9c06;
		}
		.two{
			background-color: #9fbc2c;
		}

	</style>
</head>
<body>
	<!-- 头部 -->
	<header>
		<img src="image/logo.gif" alt="">
		<input type="text" placeholder="搜索精髓">
		<botton class = "bo">搜 索</botton>
	</header>
	<!-- 导航 -->
	<nav>
		<div class="wrapper">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#" class = "two">图片</a></li>
				<li><a href="#">设计图</a></li>
				<li><a href="#">PSD图</a></li>
				<li><a href="#">矢量</a></li>
				<li><a href="#">高清图</a></li>
				<li><a href="#">原创精品</a></li>
				<li><a href="#">PPT</a></li>
				<li><a href="#">淘宝素材</a></li>
			</ul>
		</div>
	</nav>
	
</body>
</html>